<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Item Sliding - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Item Sliding - Basic</ion-title>
          <ion-buttons slot="secondary">
            <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
          </ion-buttons>
          <ion-buttons slot="primary">
            <ion-button onclick="reload()">Reload</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">

        <div padding>
          <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
          <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
          <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
        </div>

        <ion-list id="list">
          <div class="nested-div">
            <ion-item-sliding>
              <ion-item>
                <ion-label>
                  <h2>No Options</h2>
                  <p>Should not error or swipe without options</p>
                </ion-label>
              </ion-item>
            </ion-item-sliding>

            <ion-item-sliding id="item6">
              <ion-item>
                <ion-label>
                  One Line, dynamic option and text
                </ion-label>
              </ion-item>
              <ion-item-options class="show-options">
                <ion-item-option color="primary">
                  <ion-icon name="more"></ion-icon>
                  <span class="more-text"></span>
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item6')">
                  <ion-icon name="archive"></ion-icon>
                  <span class="archive-text"></span>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item6">
              <ion-item>
                <ion-label>
                  Two options, one dynamic option and text
                </ion-label>
              </ion-item>
              <ion-item-options side="left">
                <ion-item-option color="primary">
                  <ion-icon slot="icon-only" name="more"></ion-icon>
                </ion-item-option>
              </ion-item-options>
              <ion-item-options side="right" class="show-options">
                <ion-item-option color="primary">
                  <ion-icon name="more"></ion-icon>
                  <span class="more-text"></span>
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item6')">
                  <ion-icon name="archive"></ion-icon>
                  <span class="archive-text"></span>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item100">
              <ion-item href="#">
                <ion-label>
                  <h2>HubStruck Notifications</h2>
                  <p>A new message from a repo in your network</p>
                  <p>Oceanic Next has joined your network</p>
                </ion-label>
                <ion-note slot="end">
                  10:45 AM
                </ion-note>
              </ion-item>

              <ion-item-options side="left">
                <ion-item-option onclick="noclose('item100')">
                  No close
                </ion-item-option>
              </ion-item-options>
              <ion-item-options side="right">
                <ion-item-option color="light" onclick="unread('item100')">
                  <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>
                <ion-item-option onclick="unread('item100')">
                  <ion-icon slot="icon-only" name="star"></ion-icon>
                </ion-item-option>
              </ion-item-options>

            </ion-item-sliding>

            <ion-item-sliding id="item0">
              <ion-item text-wrap onclick="clickedItem('item0')">
                <ion-label>
                  <h2>RIGHT side - no icons</h2>
                  <p>Hey do you want to go to the game tonight?</p>
                </ion-label>
              </ion-item>
              <ion-item-options class="sliding-enabled">
                <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
                <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item1">
              <ion-item text-wrap detail href="#" class="activated">
                <ion-label>
                  <h2>LEFT side - no icons</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="left" class="sliding-enabled">
                <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
                <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
              </ion-item-options>
            </ion-item-sliding>


            <ion-item-sliding id="item2">
              <ion-item text-wrap detail>
                <ion-label>
                  <h2>RIGHT/LEFT side - icons</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="left" class="sliding-enabled">
                <ion-item-option color="secondary" expandable onclick="unread('item2')">
                  <ion-icon name="ios-checkmark"></ion-icon>Unread
                </ion-item-option>
              </ion-item-options>

              <ion-item-options side="right" class="sliding-enabled">
                <ion-item-option color="primary" onclick="archive('item2')">
                  <ion-icon name="mail"></ion-icon>Archive
                </ion-item-option>
                <ion-item-option color="danger" onclick="del('item2')" expandable>
                  <ion-icon name="trash"></ion-icon>Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item3">
              <ion-item text-wrap detail>
                <ion-label>
                  <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                  <p>I think I figured out how to get more Mountain Dew</p>
                </ion-label>
              </ion-item>
              <ion-item-options side="left" icon-start class="sliding-enabled">
                <ion-item-option color="secondary" expandable onclick="unread('item3')">
                  <ion-icon name="ios-checkmark"></ion-icon>Unread
                </ion-item-option>
              </ion-item-options>

              <ion-item-options icon-start>
                <ion-item-option color="primary" onclick="archive('item3')">
                  <ion-icon name="mail"></ion-icon>Archive
                </ion-item-option>
                <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
                  <ion-icon name="trash"></ion-icon>Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>


            <ion-item-sliding id="item4">
              <ion-item>
                <ion-icon name="mail" slot="start"></ion-icon>
                <ion-label>
                  One Line w/ Icon, div only text
                </ion-label>
              </ion-item>
              <ion-item-options icon-start>
                <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
                  <ion-icon name="archive"></ion-icon>Archive
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>


            <ion-item-sliding id="item5" class="sliding-enabled">
              <ion-item>
                <ion-avatar slot="start">
                  <img src="">
                </ion-avatar>
                <ion-label>
                  One Line w/ Avatar, div only text
                </ion-label>
              </ion-item>
              <ion-item-options>
                <ion-item-option color="primary" expandable>
                  <ion-icon name="more"></ion-icon>More
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item5')">
                  <ion-icon name="archive"></ion-icon>Archive
                </ion-item-option>
                <ion-item-option color="light" onclick="del('item5')">
                  <ion-icon name="trash"></ion-icon>Delete
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>


            <ion-item-sliding id="item7">
              <ion-item>
                <ion-label>
                  One Line, dynamic icon-start option
                </ion-label>
              </ion-item>
              <ion-item-options icon-start>
                <ion-item-option color="primary">
                  <ion-icon name="more"></ion-icon>
                  <span class="more-text"></span>
                </ion-item-option>
                <ion-item-option color="secondary" onclick="archive('item7')">
                  <ion-icon name="archive"></ion-icon>
                  <span class="archive-text"></span>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item8">
              <ion-item>
                <ion-thumbnail slot="start">
                  <img src="">
                </ion-thumbnail>
                <ion-label>
                  <h2>DOWNLOAD</h2>
                  <p>Paragraph text.</p>
                </ion-label>
              </ion-item>
              <ion-item-options>
                <ion-item-option color="primary" onclick="archive('item8')">
                  <ion-icon name="archive"></ion-icon>Archive
                </ion-item-option>
                <ion-item-option color="secondary" expandable onclick="download('item8')">
                  <ion-icon name="download" class="download-hide"></ion-icon>
                  <div class="download-hide">Download</div>

                  <ion-icon class="download-spinner" name="refresh"></ion-icon>
                  <div class="download-spinner">Loading...</div>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>

            <ion-item-sliding id="item9">
              <ion-item>
                <ion-thumbnail slot="start">
                  <img src="">
                </ion-thumbnail>
                <ion-label>
                  <h2>ion-item-sliding without options (no sliding)</h2>
                  <p>Paragraph text.</p>
                </ion-label>
              </ion-item>
            </ion-item-sliding>

            <ion-item text-wrap>
              <ion-label>
                <h2>Normal ion-item (no sliding)</h2>
                <p>Paragraph text.</p>
              </ion-label>
            </ion-item>

            <ion-item text-wrap onclick="clickedItem('item9')">
              <ion-label>
                <h2>Normal button (no sliding)</h2>
                <p>Hey do you want to go to the game tonight?</p>
              </ion-label>
            </ion-item>
          </div>

        </ion-list>

        <script>
          var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');

          // Toggle the dynamic options
          var dynamicShowOptions = document.getElementsByClassName('show-options');
          toggleDynamicOptions();

          function toggleDynamicOptions() {
            // TODO the element needs to be removed / added to the DOM
          }

          // Change the text for the more and archive buttons
          var dynamicText = true;
          var moreTextSpans = document.getElementsByClassName('more-text');
          var archiveTextSpans = document.getElementsByClassName('archive-text');
          changeDynamicText();

          function changeDynamicText() {
            dynamicText = !dynamicText;

            for (var i = 0; i < moreTextSpans.length; i++) {
              var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
              moreTextSpans[i].innerHTML = moreText;
            }

            for (var i = 0; i < archiveTextSpans.length; i++) {
              var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
              archiveTextSpans[i].innerHTML = archiveText;
            }
          }

          function toggleSliding() {
            // this.slidingEnabled = !this.slidingEnabled;
          }

          function closeOpened() {
            var list = document.getElementById('list');
            list.closeSlidingItems();
          }

          function noclose(item) {
            var itemEle = document.getElementById(item);
            console.log('no close', itemEle);
          }

          function unread(item) {
            closeSlidingItem('UNREAD', item);
          }

          function archive(item) {
            closeSlidingItem('ARCHIVE', item);
          }

          function del(item) {
            closeSlidingItem('DELETE', item);
          }

          function download(item) {
            var itemEle = document.getElementById(item);
            console.log(itemEle);
            itemEle.classList.add('downloading');
            setTimeout(() => {
              alert('Item was downloaded!');

              itemEle.classList.remove('downloading');
              itemEle.close();
            }, 1500);
          }

          function closeSlidingItem(option, item) {
            var itemEle = document.getElementById(item);

            // TODO open alert instead
            if (itemEle) {
              itemEle.close();
            }
            console.log(option, itemEle);
          }

          function clickedItem(item) {
            var itemEle = document.getElementById(item);
            console.log('Clicked, ion-item', itemEle);
          }

          function reload() {
            window.location.reload();
          }
          document.addEventListener('ionSwipe', (ev)=> console.log('SWIPE!!', ev.detail));
          document.addEventListener('ionDrag', (ev)=> console.log('DRAG!!', ev.detail.getOpenAmount()));

        </script>
        <style>
          img {
            height: 100px;
          }

          .download-spinner {
            display: none;
          }

          svg circle {
            stroke: white;
          }

          .downloading .download-spinner {
            display: block;
          }

          .downloading .download-hide {
            display: none;
          }
        </style>
      </ion-content>

  </ion-app>
</body>
</html>
